<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg"
    class="animated-icon"
    :style="{ color: color }"
  >
    <circle
      cx="512"
      cy="512"
      r="400"
      stroke="currentColor"
      stroke-width="70"
      fill="none"
      class="circle"
    />
    <polyline
      points="350,540 470,660 700,430"
      stroke="currentColor"
      stroke-width="80"
      fill="none"
      class="checkmark"
    />
  </svg>
</template>

<script lang="ts" setup>
defineProps({
  size: {
    type: String,
    default: '64px'
  },
  color: {
    type: String,
    default: '#000'
  }
})
</script>

<style scoped>
.animated-icon {
  display: block;
  margin: auto;
}

.circle {
  stroke-dasharray: 2512; /* 2 * PI * 400 */
  stroke-dashoffset: 2512;
  animation: circle-animation 1s ease-out forwards;
}

@keyframes circle-animation {
  to {
    stroke-dashoffset: 0;
  }
}

.checkmark {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: checkmark-animation 1s ease-out 1s forwards;
}

@keyframes checkmark-animation {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
